<template>
  <view class="wrapper">

    <view class="card header">

      <image class="left" :src="userInfo ? userInfo.headimg : ''"></image>

      <view class="center">
        <view class="name">{{ userInfo ? userInfo.nickname : "" }}</view>
        <view class="info">
          <text class="label">综合评分</text>
          <starts :value="userInfo ? userInfo.score : 0" read-only/>
        </view>
      </view>

      <view class="right">
        <view class="num">{{ userInfo ? userInfo.serviceNum : "" }}</view>
        <view class="tip">完成单数</view>
      </view>

    </view>

    <view class="card list">
      <view class="title">客户评价</view>

      <view class="item" v-for="(item,i) in list" :key="i">
        <image class="left" :src="item.headimg"></image>

        <view class="right">
          <view class="top">
            <view class="name text-cut">{{ item.nickname }}</view>
            <view class="time">{{ item.createTime }}</view>
          </view>
          <view class="info">
            <text class="label">综合评分</text>
            <starts :value="item.staffScore" read-only/>
          </view>
          <view class="content">{{ item.comment }}</view>
          <view class="grid col-4 grid-square flex-sub" v-if="item.images && item.images.length > 0">
            <view class="image-wrapper" v-for="(image,i) in item.images" :key="i">
              <image class="img" :src="image"></image>
            </view>
          </view>

        </view>

      </view>


      <list-loading v-if="loading"/>
      <list-empty v-if="!loading && (!list || list.length == 0)"/>
      <list-load-over v-else-if=" loadOver"/>
    </view>

  </view>
</template>

<script>
import Starts from "@/components/stars";
import Api from "@/utils/Api";
import ListLoadOver from "@/components/list/loadOver";
import ListEmpty from "@/components/list/empty";
import ListLoading from "@/components/list/loading";

export default {
  name: "technician-comment",
  components: {Starts, ListLoadOver, ListEmpty, ListLoading},
  data() {
    return {
      list: [],
      page: 0,
      loading: false,
      loadOver: false,

      userInfo: null,
    }
  },
  onLoad(options) {
    options = this.core.decodeURIComponentObject(options);

    this.req.getUserInfoCheckMobile().then(res => {
      this.userInfo = res;

      this.getList();
    })
  },
  methods: {
    refresh() {
      this.clear();
      this.getList();
    },
    clear() {
      this.page = 0;
      this.list = [];
      this.loadOver = false;
      this.loading = false;
    },
    getList() {
      if (this.loadOver) return;
      this.loading = true;
      Api.getTechnicianComments(++this.page).then(res => {
        this.list.push(...res)
        if (res.length < 10) this.loadOver = true;
      }).finally(() => this.loading = false)
    }
  },
  onPullDownRefresh() {
    this.refresh();
  },
  onReachBottom() {
    this.getList();
  },
}
</script>

<style scoped lang='scss'>
.wrapper {
  padding: r(40px 30px);
  padding-bottom: calc(#{r(40px)} + env(safe-area-inset-bottom));

  .card {
    background-color: white;
    padding: r(30px);
    border-radius: r(10px);

    & + .card {
      margin-top: r(30px);
    }
  }

  .header {
    display: flex;
    align-items: center;

    .left {
      width: r(116px);
      height: r(116px);
      border-radius: 50%;
      margin-right: r(30px);
    }

    .center {
      flex: 1;

      .name {
        font-size: r(32px);
        color: #000000;


      }

      .info {
        display: flex;
        align-items: center;
        margin-top: r(14px);

        .label {
          font-size: r(24px);
          color: #666666;
          margin-right: r(12px);
        }
      }


    }

    .right {
      text-align: center;

      .num {
        font-size: r(32px);
        font-weight: bold;
        color: #E73832;
      }

      .tip {
        margin-top: r(14px);
        font-size: r(24px);
        color: #333333;
      }

    }

  }


  .list {

    .label {
      font-size: r(28px);
      font-weight: 500;
      color: #000000;
    }


    .item {
      padding: r(30px 0);
      border-bottom: 1px solid #F0F1F6;
      display: flex;


      .left {
        width: r(78px);
        height: r(78px);
        border-radius: 50%;
        margin-right: r(20px);
      }

      .right {
        flex: 1;
        width: calc(100% - #{r(98px)});

        .top {
          display: flex;
          align-items: center;

          .name {
            flex: 1;
            font-size: r(26px);
            color: #000000;
          }

          .time {
            flex-shrink: 0;
            color: #999999;
            font-size: r(24px);
          }
        }

        .info {
          display: flex;
          align-items: center;
          margin-top: r(14px);

          .label {
            font-size: r(24px);
            color: #666666;
            margin-right: r(12px);
          }
        }

        .content {
          margin: r(20px 0);
          font-size: r(24px);
          color: #999999;
        }

        .img {
          height: 100%;
          width: 100%;
          position: absolute;

        }
      }

      .image-wrapper .img {
        border-radius: r(20px);
        border: 1px solid #f2f2f2;
      }
    }
  }
}

</style>